<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="keywords" content="Editor.md,editor,Markdown Editor,Markdown,编辑器,Markdown编辑器,Markdown在线编辑器,在线编辑器,开源编辑器,开源Markdown编辑器" />
        <meta name="description" content="Editor.md: a simple online markdown editor. 开源在线 Markdown 编辑器" />
        <title>HTML Preview(markdown to html) - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/editormd.preview.css" />
        <style>            
            .editormd-html-preview {
                width: 100%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="test-editormd-view2">
                <span id="articleTitle" style="font-weight:bold;color:#f60"></span>
                <textarea id="append-test" style="display:none;">
                    
                </textarea>    
            </div>
        </div>
        <!-- <script src="js/zepto.min.js"></script>
		<script>		
			var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
        </script> -->
        <script src="js/config.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="lib/marked.min.js"></script>
        <script src="lib/prettify.min.js"></script>
        <script src="lib/raphael.min.js"></script>
        <script src="lib/underscore.min.js"></script>
        <script src="lib/sequence-diagram.min.js"></script>
        <script src="lib/flowchart.min.js"></script>
        <script src="lib/jquery.flowchart.min.js"></script>
        <script src="js/editormd.js"></script>
        <script type="text/javascript">
            var contextPath = getContextPath();
            var id = getQueryVariable("id");
            $(function() {
                if(id != ""){
                    //先把文章内容查询出来
                    $.ajax({
                        url:  window.location.origin + contextPath + '/getArticleById?id='+id,
                        type: 'get',
                        success: function (res) {

                            if(res.title != undefined){
                                document.title = res.title;
                                document.getElementById("articleTitle").innerHTML = res.title;
                                document.getElementById("append-test").value = res.content;
                                var testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
                                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                                    emoji           : true,
                                    taskList        : true,
                                    tex             : true,  // 默认不解析
                                    flowChart       : true,  // 默认不解析
                                    sequenceDiagram : true,  // 默认不解析
                                });
                            }else{
                                alert("未查询到文章");
                            }
                        },
                        error: function (result) {alert("查询文章失败，内部错误.");}
                    });
                }

            });

            //获取浏览器地址上的url参数
            function getQueryVariable(variable){
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return "";
            }
        </script>
    </body>
</html>